<template>
  <div>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="queryForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        style="width: 100%"

    >
      <el-table-column
          prop="id"
          sortable
          label="id"
          width="50">
      </el-table-column>
      <el-table-column
          sortable
          prop="username"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="stop"
          label="状态">
        <template v-slot="scope">
<!--          {{ scope.row.stop == 0 ? '正常' : '停用' }}-->

          <el-switch
              v-model="scope.row.stop"
              @change="changeStatus(scope.row.id,scope.row.stop)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
          >
          </el-switch>
        </template>


      </el-table-column>
      <el-table-column
          prop="header"
          label="头像">
        <template v-slot="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="getBaseUrl(scope.row.header)"
            ></el-image>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="250">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="openEdit(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="openBind(scope.row.id)">绑定角色</el-button>
        </template>
      </el-table-column>


    </el-table>

    <el-pagination
        @current-change="goPage"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>


    <el-dialog title="文件上传" :visible.sync="dialogFormVisible2">
      <el-form v-model="editForm">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9999/user/upFile"
              :show-file-list="false"
              :on-success="onSuccess">
            <img v-if="editForm.header" :src="getBaseUrl(editForm.header)" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="绑定角色" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="">
          <el-checkbox-group v-model="rids">
            <el-checkbox v-for="r in roles" :label="r.id">{{ r.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBind">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserView",
  data() {
    return {
      dialogFormVisible2:false,
      editForm:{
        header:'',
      },
      queryForm: {},
      tableData: [],
      current: 1,
      size: 3,
      total: 1,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      roles: [],
      rids: [],//选中角色id
      uid: '',//要绑定用户的id
    }
  }, methods: {
    changeStatus(id,stop){
      this.editForm.id=id;
      this.editForm.stop=stop;

      this.axios.post("user/edit", this.editForm).then(res=>{
        if(res.data.code==200){
          this.$message.success("修改成功");
          this.list();
        }else{
          this.$message.error("修改失败");
        }
      })
    },

    edit(){//执行修改
      this.axios.post("user/edit",this.editForm).then(res=>{
        if(res.data.code==200){
          this.$message.success("修改成功");
          this.dialogFormVisible2=false;
          this.list();
        }else{
          this.$message.error("修改失败");
        }
      })

    },
    openEdit: function (row) {//打开修改用户对话框
      this.editForm = row;
      this.editForm.header=row.header;
      this.dialogFormVisible2 = true;
    },
    onSuccess(file) {//文件上传成功后调用该方法
      this.editForm.header=file.data;
    },
    getBaseUrl(url){
      return this.$baseURL+url;
    },
    saveBind() {
      this.axios.post("user/bindRole", {uid: this.uid, rids: this.rids}).then(res => {
        if (res.data.code == 200) {
          this.$message.success("绑定成功");
          this.dialogFormVisible = false;
        } else {
          this.$message.error("绑定失败");
        }
      })
    },
    openBind(uid) {//打开绑定角色的对话框
      this.listRoles();//获取所有角色
      this.getRoleByUid(uid);//获取已经有角色id
      this.dialogFormVisible = true;
      this.uid = uid;

    },
    getRoleByUid(uid) {//根据用户id获取其拥有角色
      this.axios.get("user/getRoleByUid", {params: {id: uid}}).then(res => {
        this.rids = res.data.data;
      })
    },
    goPage(page) {
      this.current = page;
      this.list();

    },
    listRoles() {//获取所有角色
      this.axios.get("role/list").then(res => {
        this.roles = res.data.data;
      })
    },
    list() {
      this.axios.get("user/list", {
        params: {
          current: this.current, size: this.size, username: this.queryForm.username
        }
      }).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      })
    }
  }, created() {
    this.list()
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>